<template>
<div class="ticket" ref="imageWrapper">
  <div class="headers-img" v-if="originImg">
  <div class="header-img" >
    <img :src="message.after_image" alt="">
    <!-- <img src="http://cdn.suoluomei.com/www/szcidesco.com/cidesco_img/mobile/banner.png?x-oss-process=image/quality,Q_25" alt=""> -->
    
    <!-- <img src="http://hfc.suoluomei.com/hpl/Public/Beautiful/sjx.png" alt=""> -->
    <!-- <img src="http://hfc.suoluomei.com/hpl/Public/Beautiful/sjx1.png" alt="">
    <img src="http://hfc.suoluomei.com/hpl/Public/Beautiful/sjx2.png" alt="">
    <img src="http://hfc.suoluomei.com/hpl/Public/Beautiful/sjx3.png" alt=""> -->
  </div>
  <div class="header-name">
    <!-- <div class="name">{{message.name}}</div>
    <div class="num"><font>{{message.id}}</font>号</div> -->
  </div>
  <div class="contant">
    <font>我是{{message.id}}号 {{message.name}}</font>
    <font>{{message.content}}</font>
  </div>
  <div class="img-ticket">
    <div><img :src="message.qrcode_url" alt=""></div>
    <!-- <div><img src=" http://sucai.suoluomei.cn/sucai_zs/images/5bf7608c3dca8.jpg" alt=""></div> -->
    <font>长按二维码投票抽奖</font>
  </div>
  </div>
  <div class="post" v-if="showPost" ref="post">
    <img :src="dataURL">
  </div>
</div>
</template>

<script>
import http from "../utils/http";
const html2canvas = () => import("html2canvas/dist/html2canvas.js")
export default {
  name: "ticket",
  data() {
    return {
      message: [],
      dataURL: '',
      showPost: false,
      originImg: true
    };
  },
  created() {
    var str = location.href;
    // console.log('urlStr',str)
    // var reg = /sign\/(.*)#/i
    // var res = str.search(reg)
    var start = str.search("sign/");
    var end = str.search("#");
    var start2 = parseInt(start + 5);
    var res = str.substring(start2, end);
    // console.log('res',res)
    let that = this;
    // console.log('that.$route.query.candidates_id',that.$route.query.candidates_id)
    http
      .post("Zmhf/index", {
        data: {
          candidates_id: that.$route.query.candidates_id
        },
        key: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: res,
        type: "createSign"
      })
      .then(function(response) {
        // if (response.status == 0) {
        //   that.$router.push({
        //     path: '/'
        //   });
        // }
        // console.log(response);
        that.message = response.data.candidates_info[0];
        try {
          that.toImage()
        } catch (error) {
          // console.log(error)
        }
      })
      .catch(function(error) {
        // console.log(error);
      });
  },
  methods: {
    toImage() {
      try{

      html2canvas(this.$refs.imageWrapper,{
        backgroundColor: null,
        allowTaint: false,
        useCORS: true,
        logging: true
      }).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        this.dataURL = dataURL;
        this.showPost = true
        this.originImg = false
      });
    }catch(e){

    }
    }
  },
  mounted() {
    
  }
};
</script>

<style lang="scss" scoped>
.ticket {
  position: relative;
  display: inline-flex;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: scroll;
  background-image: url("http://sucai.suoluomei.cn/sucai_zs/images/tickets.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  vertical-align: bottom;
  
  .headers-img{
    position: relative;
    display: inline-flex;
    justify-content: center;
    width: 100%;
    height: 100vh;
    width: 100%;
    h2{
    position: absolute;
    left: 0;
    top: 1rem;
    width: 100%;
    height: 1rem;
    color: #fff;
  }
  .header-img {
    margin-top: 6rem;
    width: 11rem;
    height: 13rem;
    /*max-height: 14rem;*/
    background-color: transparent;
    overflow: hidden;
    img {
      vertical-align: bottom;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .header-name {
    position: absolute;
    left: 0;
    display: inline-flex;
    justify-content: space-around;
    top: 18rem;
    width: 100%;
    .name {
      color: #fff;
      font-size: 1.2rem;
    }
    .num {
      font {
        color: #fff;
        font-size: 1.2rem;
      }
      color: #fff;
    }
  }
  .contant {
    position: absolute;
    left: 0;
    top: 20.5rem;
    width: 100%;
    color: #fff;
    font {
      display: block;
      font-size: 1rem;
      &:nth-of-type(2){
        margin-left: 10%;
        width: 80%;
        max-height: 5.7rem;
        font-size: 0.8rem;
        overflow: hidden;
      }
      &:nth-of-type(1){
        margin-left: 10%;
        width: 80%;
        max-height: 3.5rem;
        overflow: hidden;
      }
    }
  }
  .img-ticket {
    position: absolute;
    left: 0;
    top: 28rem;
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    img {
      padding: 0.1rem;
      width: 6rem;
      height: 6rem;
    }
    font {
      display: block;
      width: 100%;
      color: #fff;
    }
  }
  
  }
  .post {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      max-width: 100%;
      border: 0;
      vertical-align: bottom;
    }
  }
}
</style>
